<template>
  <div>
    <Card title="SMS服务商设置" class="w-1/2 !m-10px min-w-700px">
      <BasicForm @register="registerSMS">
        <template #TypeSettings>
          <Collapse expandIconPosition="right">
            <CollapsePanel header="类型设置" :forceRender="true">
              <BasicForm @register="registerType"
            /></CollapsePanel>
            <CollapsePanel header="源设置" :forceRender="true">
              <BasicForm @register="registerSource"
            /></CollapsePanel>
            <CollapsePanel header="目标设置" :forceRender="true">
              <BasicForm @register="registerGoal"
            /></CollapsePanel>
            <CollapsePanel header="其他设置" :forceRender="true">
              <BasicForm @register="registerOther"
            /></CollapsePanel>
          </Collapse>
        </template>
      </BasicForm>
      <div class="float-right">
        <Button class="mr-10px" @click="send">发送测试短信</Button>
        <Button type="primary" class="mr-10px" @click="save" :disabled="!isSettingEdit"
          >保存</Button
        >
      </div>
    </Card>
    <Card title="Slack设置" class="w-1/2 !m-10px min-w-700px">
      <BasicForm @register="registerSlack" />
    </Card>
    <SendTestMessageModel @register="register" />
  </div>
</template>

<script lang="ts" setup>
  import { Card, Collapse, CollapsePanel, Button } from 'ant-design-vue';
  import { FormSchema } from '/@/components/Form/index';
  import { BasicForm, useForm } from '/@/components/Form';
  import { useModal } from '/@/components/Modal';
  import { modalFormStyleSetting } from '/@/settings/thingsBoardDesign';
  import SendTestMessageModel from './SendTestMessageModel.vue';
  import {
    getSlackSetting,
    postSlackSetting,
    getSMSSetting,
    postSMSSetting,
  } from '/@/api/thingsborad/settings/BasicSetting/basicSetting';
  import { onMounted, ref } from 'vue';
  import {
    SMSForm,
    typeSetting,
    SourceSettings,
    GoalSetting,
    OtherSettings,
    isSettingEdit,
  } from './notice.data';
  let resSlack = ref<Recordable>({});
  let resSetting = ref<Recordable>({});
  const slackForm: FormSchema[] = [
    {
      field: 'botToken',
      component: 'Input',
      label: 'Slack API令牌',
      colProps: {
        span: 24,
      },
      componentProps: {
        onchange: () => {
          setSlackProps({
            submitButtonOptions: {
              disabled: false,
            },
          });
        },
      },
    },
  ];
  const [register, { openModal }] = useModal();
  // Slack设置
  const [
    registerSlack,
    { setProps: setSlackProps, setFieldsValue: setSlackFormValue, validate: validateSlack },
  ] = useForm({
    layout: 'vertical',
    schemas: slackForm,
    showResetButton: false,
    submitButtonOptions: {
      text: '保存',
      disabled: true,
      onClick: async () => {
        try {
          let data = await validateSlack();
          if (!data.botToken) {
            resSlack.value = { deliveryMethodsConfigs: {} };
          } else {
            Object.assign(resSlack.value.deliveryMethodsConfigs.SLACK, data);
          }
          await postSlackSetting(resSlack.value);
          setSlackProps({
            submitButtonOptions: {
              disabled: true,
            },
          });
        } catch (e) {
          console.error('提交Slack设置失败');
        }
      },
    },
    actionColOptions: {
      span: 24,
    },
    ...modalFormStyleSetting,
  });
  // SMS服务商设置
  const [registerSMS, { validate: validateSMS, setFieldsValue: setSMSValue }] = useForm({
    layout: 'vertical',
    schemas: SMSForm,
    showActionButtonGroup: false,
    ...modalFormStyleSetting,
  });
  // 类型设置
  const [registerType, { setFieldsValue: setTypeValue, validate: validateType }] = useForm({
    layout: 'vertical',
    schemas: typeSetting,
    showActionButtonGroup: false,
    ...modalFormStyleSetting,
  });
  // 源设置
  const [registerSource, { setFieldsValue: setSourceValue, validate: validateSource }] = useForm({
    layout: 'vertical',
    schemas: SourceSettings,
    showActionButtonGroup: false,
    ...modalFormStyleSetting,
  });
  // 目标设置
  const [registerGoal, { setFieldsValue: setGoalValue, validate: validateGoal }] = useForm({
    layout: 'vertical',
    schemas: GoalSetting,
    showActionButtonGroup: false,
    ...modalFormStyleSetting,
  });
  // 其他设置
  const [registerOther, { setFieldsValue: setOtherValue, validate: validateOther }] = useForm({
    layout: 'vertical',
    schemas: OtherSettings,
    showActionButtonGroup: false,
    ...modalFormStyleSetting,
  });
  onMounted(async () => {
    try {
      resSlack.value = await getSlackSetting();
      if (!resSlack.value.deliveryMethodsConfigs.SLACK) {
        resSlack.value = {
          deliveryMethodsConfigs: {
            SLACK: {
              botToken: null,
              method: 'SLACK',
            },
          },
        };
      }
      await setSlackFormValue(resSlack.value.deliveryMethodsConfigs.SLACK);
    } catch (e) {
      console.error('获取Slack配置失败', e);
    }
    try {
      resSetting.value = await getSMSSetting();
      await setSMSValue(resSetting.value.jsonValue);
      await setTypeValue(resSetting.value.jsonValue);
      await setSourceValue(resSetting.value.jsonValue);
      await setGoalValue(resSetting.value.jsonValue);
      await setOtherValue(resSetting.value.jsonValue);
    } catch (e) {
      console.error('获取SMS配置失败', e);
    }
    isSettingEdit.value = false;
  });
  async function save() {
    try {
      let res = await validateSMS();
      resSetting.value.jsonValue = {};
      Object.assign(resSetting.value.jsonValue, res);
      if (res.type === 'SMPP') {
        let type = await validateType();
        let source = await validateSource();
        let goal = await validateGoal();
        let other = await validateOther();
        Object.assign(resSetting.value.jsonValue, type, source, goal, other);
      }
      await postSMSSetting(resSetting.value);
      isSettingEdit.value = false;
    } catch (e) {
      console.error('提交SMS配置失败');
    }
  }
  async function send() {
    let res = await validateSMS();
    resSetting.value.jsonValue = {};
    Object.assign(resSetting.value.jsonValue, res);
    if (res.type === 'SMPP') {
      let type = await validateType();
      let source = await validateSource();
      let goal = await validateGoal();
      let other = await validateOther();
      Object.assign(resSetting.value.jsonValue, type, source, goal, other);
    }
    openModal(true, resSetting.value.jsonValue);
  }
</script>
